<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="./js/utils.js" />
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      .outbox {
        position: relative;
        width: 500px;
        height: 500px;
        margin: 50px auto 0;
      }
      .box {
        width: 500px;
        height: 500px;
        /* border: 1px solid green; */
        /* overflow-x: auto; */
        overflow: hidden;
      }
      .lb_img {
        width: 2500px;
      }
      .lb_img img {
        float: left;
        width: 500px;
      }
      .left {
        position: absolute;
        width: 50px;
        height: 50px;
        color: #fff;
        left: 5px;
        top: 0;
        margin-top: 50%;
        text-align: center;
        line-height: 50px;
        background-color: rgba(0, 0, 0, 0.5);
      }
      .right {
        position: absolute;
        width: 50px;
        height: 50px;
        color: #fff;
        margin-top: 50%;
        right: 0;
        right: 5px;
        background-color: rgba(0, 0, 0, 0.5);
        text-align: center;
        line-height: 50px;
      }
      .right,
      .left {
        cursor: Pointer;
      }
      .bottum {
        position: absolute;
        overflow: hidden;
        width: 100px;
        text-align: center;
        bottom: 20px;
        display: flex;
        justify-content: space-around;
        margin-left: 50%;
        left: -50px;
        cursor: pointer;
      }
      .bottum p {
        float: left;
        text-align: center;
        /* display: block; */
        width: 20px;
        height: 20px;
        border-radius: 50%;
        font-size: 14px;
        color: #fff;
        border: 2px solid #baa3a3;
        background-color: rgba(0, 0, 0, 0.5);
      }
      .bottum .active {
        background-color: rgba(222, 222, 222, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="outbox">
      <div class="box">
        <div class="lb_img">
          <img src="./img/企鹅1.jpg" alt="企鹅1" />
          <img src="./img/企鹅2.jpg" alt="企鹅2" />
          <img src="./img/企鹅3.png" alt="企鹅3" />
          <img src="./img/企鹅4.jpg" alt="企鹅4" />
          <img src="./img/企鹅1.jpg" alt="企鹅1" />
        </div>
        <p class="right">></p>
        <p class="left"><</p>

        <div class="bottum">
          <p class="active">1</p>
          <p>2</p>
          <p>3</p>
          <p>4</p>
        </div>
      </div>
    </div>
    <script>
      var outbox = document.querySelector(".outbox");
      var box = document.querySelector(".box");
      //现在是图片的数组
      var imgs = document.querySelectorAll(".lb_img img");

      //右按钮
      var left_bt = document.querySelector(".left");
      //左按钮
      var right_bt = document.querySelector(".right");

      //现在是小圆点的数组
      var pages = document.querySelectorAll(".bottum p");

      var timer; //储存计时器的id
      var imgindex = 0; //储存img伪数组的下标
      var pageindex = 0; //储存page为数组的下标

      //给每一个小圆点添加一个点击事件
      for (var i = 0; i < pages.length; i++) {
        //给pages每一个元素的添加以一个index这个属性，这个属性值为1;
        pages[i].index = i;
        pages[i].onclick = function () {
          //清除外边的计时器的id
          clearInterval(timer);

          //此时的this指向的是pages[]这个伪数组下标属性index的值赋给imgindex
          imgindex = this.index;
          
          //box 滚动条水平位置 = imgindex(下标)*box自身元素的宽度
          box.scrollLeft = imgindex * box.clientWidth;
          
          //pages[] 这伪数组元素的class延时清除
          pages[pageindex].className = "";
          
          //pagidnex = 现在的this.index 指向pages[]这个元素里面的属性 将属性值赋值给pageindex
          pageindex = this.index;
          
          //pags[pageindex]的class样式为active
          pages[pageindex].className = "active";
          
          aotuPlay();
        };
      }

      function moveNext() {
        //imgindex++ 表示的是imgindex 的下标自增加+1；
        imgindex++;
        if (imgindex === imgs.length) {
          imgindex = 1;
        }
        box.scrollLeft = imgindex * box.clientWidth;

        pages[pageindex].className='';
        pageindex++;
        if(pageindex === pages.length){
            pageindex=0;
        }
        pages[pageindex].className='active';

      }

      function movePrev() {
        imgindex--;
        if (imgindex < 0) {
          imgindex = imgs.length - 2;
          box.scrollLeft = imgindex * box.clientWidth;
        }
        box.scrollLeft = imgindex * box.clientWidth;

        pages[pageindex].className='';
        pageindex--;
        if(pageindex<0){
            pageindex=pages.length-1;
        }
        pages[pageindex].className='active';
      }
      //右边的按钮被按下的时候触发事件
      right_bt.onclick = function () {
        clearInterval(timer);
        moveNext();
        aotuPlay();
      };

      //左边的按钮被按下的时候触发事件
      left_bt.onclick = function () {
        clearInterval(timer);
       movePrev();
       aotuPlay();
      };

      aotuPlay();
      function aotuPlay(){
        timer=setInterval(function(){
            moveNext();
        },3000)
      }
    </script>
  </body>
</html>
